<script setup lang="ts">
  import { ref, onMounted, onUnmounted, provide, watch } from 'vue'
  import { debounce } from 'lodash-es'
  import FullScreenSwitch from './FullScreenSwitch.vue'
  import { useScreenFull } from '@/hook'
  import bgImg from '@/assets/visual/bg.png'

  defineProps({
    dateTime: String,
  })

  const parent = ref<HTMLDivElement>()
  const child = ref<HTMLDivElement>()

  const { isFullScreenTag, onDataViewFullscreenSwitch } = useScreenFull()

  const colors = [
    'rgba(0, 144, 255, 1)',
    'rgba(0, 255, 210, 1)',
    'rgba(255, 166, 39, 1)',
    'rgba(255, 255, 0, 1)',
    'rgba(34, 207, 0, 1)',
    'rgba(255, 85, 1, 1)',
    'rgba(255, 0, 2, 1)',
    'rgba(255, 0, 2, 1)',
    'rgba(128, 0, 255, 1)',
    'rgba(0, 26, 254, 1)',
  ]

  const triggerScale = debounce(() => {
    const targetX = 1920
    const targetY = 1080

    const currentX = parent.value?.clientWidth || 0
    // 1.缩放比例  3840 / 2160 => 2
    const ratio = currentX / targetX
    const height = targetY * ratio

    // 2.需要修改缩放的原点 body { transform-origin: left top; }
    child.value?.setAttribute('style', `transform:scale(${ratio})`)
    parent.value?.setAttribute('style', `height: ${height}px`)
  }, 150)

  onMounted(() => {
    triggerScale()
    window.addEventListener('resize', triggerScale)
  })
  onUnmounted(() => {
    window.removeEventListener('resize', triggerScale)
  })

  watch(
    () => isFullScreenTag.value,
    () => {
      onDataViewFullscreenSwitch()

      triggerScale()
    },
  )

  provide('rootColors', colors)
</script>

<template>
  <div
    ref="parent"
    class="scale-container"
    :class="isFullScreenTag ? 'is-full' : ''"
  >
    <div
      ref="child"
      class="fullscreen-container"
      :style="{ background: `url(${bgImg}) center center no-repeat` }"
    >
      <div class="fs-header">
        <div class="date-time">{{ dateTime }}</div>
        <h3 class="title">综合视图</h3>
        <FullScreenSwitch
          v-model:value="isFullScreenTag"
          class="fullscreen-switch-action"
        />
      </div>
      <div class="fs-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .scale-container {
    width: 100%;
    overflow: hidden;
    background-color: rgba(0, 23, 50);

    &.is-full {
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0%;
      left: 0%;
      z-index: 999;
    }

    .fullscreen-container {
      width: 1920px;
      height: 1080px;
      transform-origin: 0% 0%;
      position: relative;
      background-size: cover !important;

      .fs-header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 85px;
        .title {
          line-height: 85px;
          font-size: 24px;
          text-align: center;
          color: #fff;
        }
        .date-time {
          position: absolute;
          top: 24px;
          left: 30px;
          z-index: 1;
          font-size: 16px;
          color: #4b729a;
          line-height: 30px;
        }

        .fullscreen-switch-action {
          position: absolute;
          top: 24px;
          right: 30px;
          z-index: 1;
        }
      }
    }

    .fs-body {
      padding: 60px 24px 24px 24px;
      height: 100%;
      box-sizing: border-box;
    }
  }
</style>
